<style lang="scss" scoped>
.box {
  width: 100%;
  img {
    width: 100%;
    height: 260px;
  }
}
.box1 {
  width: 100%;
  img {
    width: 100%;
    height: 300px;
  }
}
.box2 {
  width: 100%;
  img {
    width: 100%;
    height: 320px;
  }
}
.box3 {
  width: 100%;
  img {
    width: 100%;
    height: 240px;
  }
}
.box4 {
  width: 100%;
  img {
    width: 100%;
    height: 200px;
  }
}
.box5 {
  width: 100%;
  img {
    width: 100%;
    height: 440px;
  }
}
.box6 {
  width: 100%;
  button {
    width: 100%;
    height: 50px;
    background: #e5b87f;
    color: #663a32;
    border: 0;
  }
}
.order{
    
    h2{
        text-align: center;
    }
    .order-item{
        display: flex;
        margin-top: 50px;
        font-size: 14px;
        .order-item1{
            width: 30%;
            margin-left: 20px;
            border: 2px solid #f2e2d3;
            background: #f3e9de;
            border-radius: 10px;
        }
        .order-item1:hover{
            border: 1px solid #cca787;
            background: #ebc58f;
        }
    }
    button {
    width: 100%;
    height: 40px;
    background: #e5b87f;
    color: #663a32;
    border: 0;
    margin-top: 10px;
  }
}
</style>
<template>
  <div>
    <van-nav-bar title="会员" />
    <div class="box">
      <img src="https://kano.guahao.com/IqE891093318" alt="" />
    </div>
    <div class="box1">
      <img src="https://kano.guahao.com/mKO891093355" alt="" />
    </div>
    <div class="box2">
      <img src="https://kano.guahao.com/eVm891091665" alt="" />
    </div>
    <div class="box3">
      <img src="https://kano.guahao.com/qsj891091732" alt="" />
    </div>
    <div class="box4">
      <img src="https://kano.guahao.com/Z3T891094383" alt="" />
    </div>
    <div class="box5">
      <img src="https://kano.guahao.com/M2Y891091759" alt="" />
    </div>
    <div class="box6">
      <button @click="show = true"><h2>￥29 开通会员</h2></button>
    </div>
    <div>
      <van-popup
        v-model:show="show"
        position="bottom"
        :style="{ height: '30%' }"
        closeable
        @click-overlay="onClickOverlay"
        @click-close-icon="onClickCloseIcon"
      >
       <div class="order">
          <h2>确认订单</h2>
          <div class="order-item">
             <div class="order-item1">
                <p>年卡</p>
                <h3>￥199</h3>
                <p>折合￥16.58/月</p>
             </div>
              <div class="order-item1">
                <p>半年卡</p>
                <h3>￥159</h3>
                <p>折合￥26.5/月</p>
             </div>
              <div class="order-item1">
                <p>月卡</p>
                <h3>￥29</h3>
                <p>折合￥29/月</p>
             </div>
          </div>
          <button @click="show = true"><h2>开通会员</h2></button>
       </div>
      </van-popup>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from 'vant';
 const show= ref(false);
    const onClickOverlay = () => {
      showToast('click-overlay');
    };
    const onClickCloseIcon = () => {
      showToast('');
    };
</script>